<template>
  <div>
    <h2>guide - guide</h2>
    <h2>{{word}}</h2>
    <!-- <h2>number -- {{ number }}</h2>
    <el-button @click="numberAdd" type="primary">number加一</el-button>
    <Demo></Demo> -->
    <el-dropdown @command="handleCommand">
      <!-- 选择下拉菜单 -->
      <span class="uname">
        <h2>
          guoxing
          {{ word}}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </h2>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="default">默认价格</el-dropdown-item>
          <el-dropdown-item command="upper">升序</el-dropdown-item>
          <el-dropdown-item command="lower">降序</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, toRefs, computed } from "vue";
import { useStore } from "@/store";
import { ArrowDown } from "@element-plus/icons-vue";
const handleCommand = (v: any) => {
  console.log(v);
  word.value = v
  // command是command属性对应的值
};
const word =ref("default")
// export default {
//   setup() {
//     const counterStore = useStore();

//     const number = ref(counterStore.number);
//     // const number = computed(() => {
//     //   return counterStore.number;
//     // });

//     return {
//       number,
//       numberAdd: counterStore.numberAdd,
//     };
//   },
// };
</script>

<style></style>
